<template>
  <el-dialog
      top="10vh"
      width="600px"
      title="添加/编辑评价选项"
      :visible.sync="dialogValue"
      :close-on-click-modal="false"
      append-to-body
  >
    <SubmitForm
        :rule-form="ruleForm"
        :rules="rules"
        :form-list="formList"
        @change="handleFormChange"
        @save="onSave"
        @close="dialogValue = false"
    />

  </el-dialog>
</template>

<script>
import {http} from '@/api'

export default {
  name: 'DishRatingAdd',
  data() {
    return {
      apiKey: 'dishRating',
      dialogValue: false,
      ruleForm: {},
      defaultForm: {
        category: '',
        dish_name: '',
        rating_value: '',
        status: 1
      },
      rules: {
        category: [{required: true, message: '菜品分类不能为空'}],
        dish_name: [{required: true, message: '菜品名称不能为空'}],
        rating_value: [{required: true, message: '评价值不能为空'}],
      },
      formList: [
        {
          label: '菜品分类',
          prop: 'category',
          name: 'select',
          options: [],
          colSpan: 24,
          placeholder: '请输入菜品分类，如：蔬菜类、肉类等'
        },
        {
          label: '菜品名称',
          prop: 'dish_name',
          name: 'select', 
          options: [],
          colSpan: 24,
          placeholder: '请输入菜品名称'
        },
        {
          label: '评价值（英文逗号分隔）',
          prop: 'rating_value',
          name: 'input',
          type: 'textarea',
          colSpan: 24,
          placeholder: '请输入评价值，多个值用逗号（英文）分隔，如：优秀,良好,一般,较差,不合格',
          rows: 4
        },
      ]
    }
  },
  methods: {
    handleFormChange({key, val, isInit = false}) {
      // 可以在这里处理表单变化
      if (key === 'category') { 
        if (!isInit) {
          this.ruleForm.dish_name = ''
        }
        http.dish.groupList({ key: 'name', category: val }).then(res => {
          this.formList[1].options = res.data.map(item => {
            return {
              value: item.name,
              label: item.name,
            }
          })
        })
      }
    },
    open(row) {
      this.dialogValue = true
      if (row) {
        // 编辑模式
        http[this.apiKey].read(row.id).then(res => {
          this.ruleForm = {
            ...res.data,
          }
          http.dish.groupList({ key: 'category' }).then(res => {
            this.formList[0].options = res.data.map(item => {
              return {
                value: item.category,
                label: item.category,
              }
            })

            this.handleFormChange({ key: 'category', val: this.ruleForm.category, isInit: true })
          })
        })
      } else {
        // 新增模式
        this.ruleForm = {
          ...this.defaultForm
        }
        http.dish.groupList({ key: 'category' }).then(res => {
          this.formList[0].options = res.data.map(item => {
            return {
              value: item.category,
              label: item.category,
            }
          })
          this.formList[1].options = []
        })
      }
    },
    onSave() {
      http[this.apiKey][this.ruleForm.id ? 'update' : 'create'](this.ruleForm.id, {
        ...this.ruleForm,
      }).then(res => {
        this.$message.success('操作成功')
        this.dialogValue = false
        this.$emit('get-page')
      })
    }
  }
}
</script>

<style scoped lang="scss">
</style> 